<!--课程管理界面-->
<template>
<div class="body_container">
  <el-menu class="el-menu-demo"
  background-color="#d9ecff">
    <el-menu-item style="float: left;font-size: 20px;margin-left: 10px">
      <img src="../assets/heima.png" alt="">
      <a style="margin-left: 10px">课程学习与认证管理系统</a>
    </el-menu-item>
    <el-menu-item style="float: right">
      <el-button type="primary" @click="returnLogin">退出登录</el-button>
    </el-menu-item>
  </el-menu>
  <el-row>
    <el-col :span="(!isCollapse)? 4:1" style="margin-top: 10px;">
      <el-menu default-active="1-1"  :collapse-transition="false" :collapse="isCollapse">
        <div class="toggle-button" @click="toggleCollage">|||</div>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">课程管理</span>
          </template>
            <el-menu-item index="1-1" @click="tip1">全部课程</el-menu-item>
            <el-menu-item index="1-2" @click="enterCreationCourse">新建课程</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">用户管理</span>
          </template>
            <el-menu-item index="2-1" @click="tip2">信息设置</el-menu-item>
            <el-menu-item index="2-2" @click="tip2">权限设置</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span slot="title">数据分析</span>
          </template>
          <el-menu-item index="3-1">暂未开发</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">系统管理</span>
          </template>
          <el-menu-item index="4-1">暂未开发</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">管理员管理</span>
          </template>
          <el-menu-item index="5-1">暂未开发</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
    <el-col :span="(!isCollapse)? 19:22" style="margin-top: 10px;" :offset="1">
      <el-row>
        <el-col :span="22" style="margin-top: 20px;margin-left: 5px">
          <el-breadcrumb separator-class="el-icon-arrow-right" >
            <el-breadcrumb-item style="font-size: x-large" :to="{ path: 'CourseManagement' }">课程管理</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size: x-large" >课程信息</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col v-for="(item,index) in CourseList" :key="index" :span="11" :offset="1" style="background-color: aliceblue;margin: 30px;"  >
          <div>
            <el-card @click.native="toCourseInformation(item)" shadow="always" id="item.id">
              <div slot="header" >
                <span>{{ item.title }}</span>
              </div>
              <div>
                  <span style="overflow:hidden">{{item.describe | ellipsis}}</span>
              </div>
              <el-divider class="el-divider-ff"></el-divider>
              <div style="float: right;margin-bottom: 14px">
                <span>{{ '创建时间：' + item.createTime[0] +"/" + item.createTime[1] + "/" + item.createTime[2] }}</span>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</div>
</template>

<script>
import { post } from '@/common/serviceUtil'
export default {
  name: 'CourseManagement',
  data () {
    return {
      isCollapse: false,
      CourseList: []
    }
  },
  mounted () {
    this.getAllCourse()
  },
  methods: {
    enterCreationCourse () {
      this.$router.push('/CreationCourse')
    }, // 点击进入新建课程界面
    tip1 () {
      alert('当前就是全部课程界面啦！')
    }, // 提示1
    toCourseInformation (item) {
      console.log(item.id)
      this.$router.push({
        name: 'CourseInformation',
        path: '/CourseInformation',
        params: { CourseId: item.id }
      })
    }, // 跳转课程信息界面
    returnLogin () {
      post('//localhost:8088/admin/logout').then((response) => {
        console.log(response)
        if (response.data.isSuccess) {
          this.$router.push('/Login')
        } else {
          alert('呀！退出失败，请稍后再试！')
        }
      })
    }, // 退出按钮
    getAllCourse () {
      post('//localhost:8088/course/getAll').then((response) => {
        console.log(response.data.data)
        this.CourseList = response.data.data
        if (this.CourseList.length === 0) {
          alert('当前的全部课程为空，请前往添加课程页面')
          this.$router.push('/CreationCourse')
        }
      })
    }, // 获取所有的课程
    tip2 () {
      alert('呀！该功能还未开发！请耐心等待')
    }, // 提示2
    toggleCollage () {
      this.isCollapse = !this.isCollapse
    } // 导航栏开关
  },
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 30) {
        return value.slice(0, 30) + '...'
      }
    }
  }
}
</script>

<style lang="less" scoped>

.body_container{
  background-color: #ffffff;
  height: 100%;
}
.el-divider-ff{
  margin: 12px 0px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-item
{
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #d9ecff;
  }
}
.toggle-button{
  // 添加背景颜色
  background-color: #4A5064;
  // 设置文本大小
  font-size:10px;
  // 设置文本行高
  line-height:24px;
  // 设置文本颜色
  color:#fff;
  // 设置文本居中
  text-align: center;
  // 设置文本间距
  letter-spacing: 0.2em;
  // 设置鼠标悬浮变小手效果
  cursor:pointer;
}
</style>
